<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { CaretTop } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const route = useRoute()
const appStore = useAppStore()
const userStore = useUserStore()

// 全局配置
const size = computed(() => appStore.size)
const isDark = computed(() => appStore.theme === 'dark')
const loading = computed(() => appStore.loading)

// 需要缓存的路由组件
const cachedViews = computed(() => appStore.cachedViews)

// 初始化应用
const initApp = async () => {
  try {
    // 检查登录状态
    await userStore.checkAuth()
    
    // 加载用户偏好设置
    await appStore.loadSettings()
    
    // 其他初始化操作...
    
  } catch (error) {
    console.error('Failed to initialize app:', error)
  }
}

// 监听路由变化
watch(
  () => route.path,
  () => {
    // 更新页面标题
    const title = route.meta.title
    if (title) {
      document.title = `${title} - 我的博客`
    }
    
    // 记录访问历史
    appStore.addVisitedView(route)
  }
)

// 初始化
onMounted(() => {
  initApp()
})
</script>

<template>
  <el-config-provider :locale="zhCn" :size="size" :z-index="3000">
    <div class="app-container" :class="{ dark: isDark }">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <keep-alive :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>

      <!-- 回到顶部 -->
      <el-backtop :right="20" :bottom="20">
        <div class="back-to-top">
          <el-icon><CaretTop /></el-icon>
        </div>
      </el-backtop>

      <!-- 全局加载 -->
      <el-loading 
        v-model:visible="loading" 
        :lock="true"
        text="加载中..."
      />
    </div>
  </el-config-provider>
</template>

<style lang="scss">
// 导入全局样式
@import '@/styles/index.scss';

.app-container {
  min-height: 100vh;
  
  // 深色模式
  &.dark {
    background-color: #1a1a1a;
    color: #fff;
    
    // 在这里添加深色模式的其他样式
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 回到顶部按钮样式
.back-to-top {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .el-icon {
    font-size: 20px;
    color: var(--el-text-color-primary);
  }
  
  &:hover {
    background-color: var(--el-color-primary-light-9);
    
    .el-icon {
      color: var(--el-color-primary);
    }
  }
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
}

::-webkit-scrollbar-thumb {
  background: var(--el-text-color-disabled);
  border-radius: 3px;
  
  &:hover {
    background: var(--el-text-color-secondary);
  }
}
</style>
